/**
 * @project         Jx
 * @revision        $Id: menu.css 321 2009-04-06 18:23:39Z fred.warnock $
 * @author          Fred Warnock (fwarnock@dmsolutions.ca)
 * @copyright       (c) 2006 DM Solutions Group Inc.
 */

/* ============== */
/* JX MENU STYLES */
/* ============== */

.jxMenuContainer .jxChrome {
  /* the background image gets used by Jx.Chrome to create a stretchable chrome */
  background-image: url(images/flyout_chrome.png);
  /* the padding reflects the amount of space to leave around the content area
   * for the chrome, typically to leave space for a shadow
   */
  padding: 5px 5px 7px 6px;
}

.jxButtonMenu span.jxMenuItemSpan {
  padding-right: 16px;
}

/* Jx Menus and Sub-menus are all built out of nested ULs
   For this to work visually, the margins and padding need to be flattened
   out, and the list marker needs to be hidden
*/

.jxMenuContainer {
  position: absolute;
  display: block;
  z-index: 2000;
  padding: 0px;
}

ul.jxMenu,
ul.jxSubMenu {
  /* Base setup */
  display: block;
  position: relative;

  list-style-type: none;
  padding: 1px;
  margin: 6px 6px 8px 7px;
  background-color: #fff;
  border: 1px solid #999;
}

li.jxMenuItemContainer {
  /* This is needed for IE to make sure submenus don't open space in the parent menu */
  /* Base setup */
  display: block;
  position: relative;
  font-size: 0px;
  line-height: 0px;

  margin: 0px;
  padding: 0px;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
}

a.jxMenuItem {
  /* Base setup */
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  outline: none;

  border: 1px solid #fff;
  background-image: url(images/menuitem.png);
  background-repeat: no-repeat;
  background-position: left top;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
  color: #000;
}

a.jxMenuItemActive {
  background-position: left -98px;
}

a.jxMenuItem:focus {
  background-position: left -74px;
}

a.jxMenuItem:focus span.jxMenuItemContent {
  border-right: 1px dotted #75ADFF;
}

a.jxMenuItemActive:focus {
  background-position: left -170px;
}

a.jxMenuItem:hover {
  background-color: #CDE5FF;
  background-position: left -26px;
}

a.jxMenuItem:hover span.jxMenuItemContent {
  border-right: 1px solid #C5E0FF;
}

a.jxMenuItemActive:hover {
  background-position: left -122px;
}

a.jxMenuItemPressed,
a.jxMenuItemPressed:hover {
  background-color: #CDE5FF;
  background-position: left -50px;
}

.jxDisabled a.jxMenuItem,
.jxDisabled span.jxMenuItemContent span {
  cursor: default;
}

.jxDisabled a.jxMenuItem:focus,
.jxDisabled a.jxMenuItemPressed,
.jxDisabled a.jxMenuItemPressed:hover,
.jxDisabled a.jxMenuItem:hover {
  background-color: #fff;
  background-position: left top;
  border-right: 1px solid #fff;
}

.jxDisabled a.jxMenuItem:hover span.jxMenuItemContent {
  border-right: 1px solid #fff;
}

span.jxMenuItemContent {
  /* If using background images, the SPAN contains the right side of the background */
  /* use padding to make space between the icon and button edge */
  /* padding-left: 0px;*/ /* butts up to the left of the button bg image */
  /* Base setup */
  display: block;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0px;
  line-height: 0px;
  white-space: nowrap;
  padding: 0px 20px 0px 0px; /* space for the arrow */
  margin: 0px;
  border-right: 1px solid #fff; /* forces IE to render properly */
  /*overflow: hidden;*/
}

.jxButtonSubMenu span.jxMenuItemContent,
.jxButtonSubMenu:hover span.jxMenuItemContent {
  background-image: url(images/emblems.png);
  background-position: right -30px;
  background-repeat: no-repeat;
}

img.jxMenuItemIcon {
  /* Base setup */
  position: absolute;
  top: 2px;
  left: 2px;

  width: 16px;
  height: 16px;
  background-position: left center;
  background-repeat: no-repeat;
}

span.jxMenuItemContent span {
  /* Base setup for empty labels */
  display: block;
  position: relative;
  cursor: pointer;
  margin: 0px; /* margins don't seem to work properly in IE */
  padding: 2px 0px 2px 22px; /* space for the icon */
  font-size: 16px;
  line-height: 16px;
  /*height: 20px;*/
  color: #000;
}

span.jxMenuItemContent span.jxMenuItemLabel {
  /* Base setup, overrides empty labels */
  color: #000;
  font-size: 11px;
}

.jxMenuItemToggle img.jxMenuItemIcon,
.jxMenuItemSet img.jxMenuItemIcon {
  background-image: url(images/emblems.png);
  background-position: 2px 0px;
  background-repeat: no-repeat;
}

.jxMenuItemToggle a.jxMenuItemActive img.jxMenuItemIcon {
  background-position: 2px -48px;
}

.jxMenuItemSet a.jxMenuItemActive img.jxMenuItemIcon {
  background-position: 2px -64px;
}

ul.jxMenu span.jxMenuSeparator,
ul.jxSubMenu span.jxMenuSeparator {
  /* Base setup */
  display: block;

  font-size: 10px;
  line-height: 10px;
  background-image: url(images/toolbar_separator_v.png);
  background-repeat: repeat-x;
  background-position: left center;
}
